<template>
  <!-- 头部信息区域 -->
  <div class="btn-head">
    <!-- 左侧：头像和基本信息 -->
    <div class="left-section">
      <div class="avatar-container">
        <el-upload
          class="avatar-uploader"
          :action="uploadFileAction"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :headers="uploadHeaders"
        >
          <img v-if="user.avatar" :src="user.avatar" class="avatar"/>
          <i v-else class="el-icon-plus avatar-placeholder"></i>
        </el-upload>
      </div>

      <div class="basic-info">
        <!-- 名称 -->
        <p>
          <span>名称：</span>
          <el-tooltip effect="dark" content="双击修改" placement="top">
        <span
          class="editable-text"
          @dblclick="openEditDialog('institutionName')"
        >
          {{ user.institutionName }}
        </span>
          </el-tooltip>
        </p>

        <!-- 账号 -->
        <p>
          <span>账号：</span>
          <el-tooltip effect="dark" content="双击修改" placement="top">
        <span
          class="editable-text"
          @dblclick="openEditDialog('institutionCode')"
        >
          {{ user.institutionCode }}
        </span>
          </el-tooltip>
        </p>

        <!-- 编辑弹框 -->
        <el-dialog
          :title="editField==='institutionCode'?'编辑账号':'编辑名称'"
          :visible.sync="editDialogVisible"
          width="400px"
          center
          :show-close="false"
        >
          <el-input v-model="editValue" clearable></el-input>
          <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
        </el-dialog>
      </div>
    </div>

    <!-- 分割线 1 -->
    <div class="divider"></div>

    <!-- 中间：账户余额信息 -->
    <div class="middle-section">
      <div class="balance-grid">
        <div class="balance-item">
          <div class="balance-label">
            <i class="fas fa-clock" aria-hidden="true"></i>
            <span>剩余课时</span>
          </div>
          <div class="balance-value">{{ user.remainingClassHours }}课时</div>
        </div>

        <div class="balance-item">
          <div class="balance-label">
            <i class="fas fa-wallet" aria-hidden="true"></i>
            <span>可支配课时</span>
          </div>
          <div class="balance-value">{{ user.disposableClassHours }}课时</div>
        </div>

        <div class="balance-item">
          <div class="balance-label">
            <i class="fas fa-credit-card" aria-hidden="true"></i>
            <span>当前扣费方式</span>
          </div>
          <div class="balance-value">{{ user.deductionMethod === '0' ? '不产生扣费' : '课时消耗' }}</div>
        </div>

        <div class="balance-item">
          <div class="balance-label">
            <i class="fa-solid fa-stairs" aria-hidden="true"></i>
            <span>累计课时</span>
          </div>
          <div class="balance-value">{{ user.accumulatedClassHours }}课时</div>
        </div>
      </div>
    </div>

    <!-- 分割线 2 -->
    <div class="divider"></div>

    <!-- 右侧：操作区 -->
    <div class="right-section">
      <div class="balance-actions">
        <el-button @click="handleRecharge" class="recharge-btn" type="primary" icon="fas fa-plus-circle">
          充值课时
        </el-button>
        <div class="balance-tip">
          <i class="fas fa-info-circle" aria-hidden="true"></i>
          <div>
            <p><span>1 课时 = 60 分钟</span><br>
              <span>系统使用分钟结算</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { initOrSearch, updateInfo } from '@/api/teacherInfo'
import { getToken } from '@/utils/auth'

export default {
  name: 'TopInfo',
  data() {
    return {
      user: {},
      editDialogVisible: false,
      editField: '',
      editValue: '',
      uploadFileAction: `${process.env.VUE_APP_BASE_API}/teacherAdditionalInfo/upload/avatar`,
      uploadHeaders: {
        Authorization: 'Bearer ' + getToken()
      }
    }
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    openEditDialog(field) {
      this.editField = field
      this.editValue = this.user[field]
      this.editDialogVisible = true
    },
    async saveEdit() {
      this.user[this.editField] = this.editValue
      await updateInfo({
        [this.editField]: this.editValue
      })
      this.editDialogVisible = false
    },
    async getInfo() {
      const res = await initOrSearch()
      res.avatar = `${process.env.VUE_APP_BASE_HOST}/${res.avatar}`
      this.user = res
    },
    // 处理头像上传成功
    handleAvatarSuccess(res, file) {
      this.user.avatar = URL.createObjectURL(file.raw)
    },
    // 上传前的校验
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isJPG && isLt5M
    },
    handleRecharge() {
      this.$notify.info('当前系统不限期使用，无需充值')
    }
  }
}
</script>
<style scoped>
.btn-head {
  * {
    user-select: none;
    cursor: pointer;
  }

  padding: 15px 20px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(8, 8, 8, 0.15);
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

/* 分割线样式 */
.divider {
  width: 1px;
  height: 60px;
  background-color: #eee;
  margin: 0 20px;
}

/* 左侧区域样式 */
.left-section {
  display: flex;
  align-items: center;
  gap: 15px;
  white-space: nowrap;
  padding-right: 10px;
}

.avatar-container {
  flex-shrink: 0;
}

.avatar-uploader {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  border: 1px solid #eee;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  font-size: 36px;
  color: #0084ff;
  line-height: 70px;
  text-align: center;
}

.basic-info {
  line-height: 1.5;
}

.basic-info span:first-child {
  color: #666;
  margin-right: 6px;
}

/* 中间区域样式 */
.middle-section {
  flex: 1;
  min-width: 0;
}

.balance-grid {
  display: flex;
  gap: 30px;
  width: 100%;
}

.balance-item {
  flex: 1;
  min-width: 0;
}

.balance-label {
  display: flex;
  align-items: center;
  color: #666;
  font-size: 14px;
  margin-bottom: 5px;
}

.balance-label i {
  margin-right: 6px;
  color: #0084ff;
  font-size: 14px;
}

.balance-value {
  font-weight: 500;
  color: #333;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 右侧区域样式 */
.right-section {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  white-space: nowrap;
  padding-left: 10px;
}

.balance-tip {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #999;
}

.balance-tip i {
  margin-right: 4px;
  font-size: 12px;
}

.recharge-btn {
  padding: 8px 20px;
  font-size: 14px;
}

.recharge-btn i {
  margin-right: 5px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .btn-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .divider {
    width: 100%;
    height: 1px;
    margin: 10px 0;
  }

  .middle-section, .right-section {
    width: 100%;
  }

  .right-section {
    align-items: flex-start;
  }

  .recharge-btn {
    width: 100%;
  }
}

.basic-info p {
  margin: 10px 0;
}

.editable-text {
  cursor: pointer;
  transition: all 0.3s;
}

.editable-text:hover {
  color: #409eff; /* Element UI 主色 */
  text-decoration: underline;
}
</style>
